<template>
  <div class="header-wrap">
    <div class="header" ref="header">
      <div class="more" :class="{'up':showFlag}" @click="show"></div>
      <div :class="logoArr" @click="go('http://lotto.sina.cn/trend/')" data-sudaclick="navigationbar_homepage"></div>
      <div class="login" v-show="!isLogin" @click="login"></div>
      <div class="avatar" v-show="isLogin" @click="avatar" ref="avatar">
      </div>
    </div>
    <div class="nav" v-show="showFlag" transition="move" ref="nav">
      <div class="nav-content">
        <div class="tabs">
          <div class="tab-item" @click="go('http://lotto.sina.cn/')" data-sudaclick="navigationbar_homepage">首页</div>
          <div class="tab-item" @click="go('http://caitong.sina.cn/')" data-sudaclick="navigationbar_caitong">彩通</div>
          <div class="tab-item" @click="go('http://sports.sina.cn/lottery/lottery/beidan/')" data-sudaclick="navigationbar_jingcai">竞彩</div>
          <div class="tab-item selected" @click="go('http://lotto.sina.cn/trend/')" data-sudaclick="navigationbar_trend">走势图
          </div>
          <div class="tab-item" @click="go('http://sports.sina.cn/lottery/lottery/shuangseqiu/')" data-sudaclick="navigationbar_ssq">
            双色球
          </div>
        </div>
        <div class="box border-1px">
          <div class="title" @click="go('http://lotto.sina.cn/ai/')" data-sudaclick="navigationbar_pao">
            小炮
            <i class="hot"></i>
          </div>
          <div class="content">
            <div class="item" @click="go('http://lotto.sina.cn/ai/ranking/')" data-sudaclick="navigationbar_paoranking">小炮指数</div>
            <div class="item" @click="go('http://lotto.sina.cn/ai/youhui/')" data-sudaclick="navigationbar_paorecharge">优惠充值</div>
            <div class="item" @click="go('http://lotto.sina.cn/ai/app/download/')" data-sudaclick="navigationbar_paoAPPdownload">APP下载</div>
          </div>
        </div>
        <div class="box box1 border-1px">
          <div class="title" @click="go('http://lotto.sina.cn/open/')" data-sudaclick="navigationbar_drawing">
            开奖
            <i class="new"></i>
          </div>
          <div class="content">
            <div class="item" @click="go('http://lotto.sina.cn/video/tcopen/')" data-sudaclick="navigationbar_tcopen">体彩直播</div>
            <div class="item" @click="go('http://lotto.sina.cn/video/fcopen/')" data-sudaclick="navigationbar_fcopen">福彩直播</div>
          </div>
        </div>
        <div class="box box1 border-1px">
          <div class="title title_inline" @click="go('https://sina.cn/')" data-sudaclick="navigationbar_sina_home">
            新浪首页
          </div>
          <div class="title title_inline" @click="go('https://sports.sina.cn/')" data-sudaclick="navigationbar_sina_sports">
            新浪体育
          </div>
        </div>
        <div class="kf">
          客服电话 :
          <a href="tel:400-6900-000-4-5" id="kf_tel">400-6900-000-4-5</a>
        </div>
        <div class="nav-close" @click="close" data-sudaclick="navigationbar_close">
          <span class="icon-close">关闭</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
export default {
  data() {
    return {
      showFlag: false,
      isLogin: false,
      logoArr: ["logo"]
    };
  },
  created() {
    this._initLogin();
    this.headLogo();
  },
  methods: {
    // 设置头部logo图标
    headLogo() {
      bus.$on('changeHeaderLogo', (logoName) =>{
        this.logoArr=[
          "logo",
          logoName
        ]
      })
    },
    show() {
      this.showFlag = !this.showFlag;
      let self = this;
      if (this.showFlag) {
        let w = util.viewData().viewWidth;
        $(self.$refs.header).addClass('fixed');
        if (w > maxW) {
          w = maxW
          $(self.$refs.nav).css({ 'left': '50%', 'right': 'auto', 'width': w + 'px', 'marginLeft': -w / 2 + 'px' });
          $(self.$refs.header).css({ 'left': '50%', 'right': 'auto', 'width': w + 'px', 'marginLeft': -w / 2 + 'px' })
        }
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.nav, {
              click: true
            });
          } else {
            this.scroll.refresh();
          }
        });
        window.SIMA && window.SIMA({
          action: '_click',
          data: {
            'aid': 'navigationbar'
          }
        });
      } else {
        $(self.$refs.header).removeClass('fixed');
        window.SIMA && window.SIMA({
          action: '_click',
          data: {
            'aid': 'navigationbar_return'
          }
        });
      }
    },
    close() {
      this.showFlag = !this.showFlag;
      let self = this;
      $(self.$refs.header).removeClass('fixed');
    },
    login() {
      window.middleLogin();
      return;
    },
    go(url) {
      if (url) {
        window.location.href = url;
      }
    },
    avatar() {
      window.location.href = 'http://my.sina.cn/?vt=4&pos=108';
    },
    _initLogin() {
      let _this = this;
      let util = window.util;

      function WapLogin() {
        let _loginLayer = '';
        this.login = function(b, f, c, d) {
          var e = arguments.length;
          if (window.SINA_OUTLOGIN_LAYER && !b) {
            _loginLayer = window.SINA_OUTLOGIN_LAYER;
            _loginLayer.set('sso', {
              entry: 'wapsso'
            }).init();
            _loginLayer.show();
            _loginLayer.register('login_success', function(g) {
              if (typeof (g) != 'undefined' && typeof (g.nick) != 'undefined') {
                window.userInfo = {};
                window.userInfo.uname = g.nick;
                window.userInfo.userface = g.portrait;
                window.userInfo.uid = g.uid;
                window.userInfo.islogin = 1;
                window.loginModule.render();
                window.SIMA && window.SIMA({
                  action: '_click',
                  data: {
                    'aid': 'launcher_login_weibo_success'
                  }
                });
              } else {
                util.alert('登录账号异常，请重新登录');
              }
            });
            _loginLayer.register('layer_hide', function() {
              f = null
            })
          }
          return false
        };
        this.updateUserInfo = function(d) {
          if (typeof (d) != 'undefined' && typeof (d.nick) != 'undefined') {
            window.userInfo = {};
            window.userInfo.uname = d.nick;
            window.userInfo.userface = d.portrait;
            window.userInfo.uid = d.uid;
            window.userInfo.islogin = 1;
            window.loginModule.render();
          }
          return false
        }
      };
      window.middleLogin = function() {
        var wapLoginObj = new WapLogin();
        wapLoginObj.login(null, function() {
        });
      }
      window.loginModule = {
        getUserInfo: function() {
          var self = this;
          if (window.userInfo) {
            self.render();
          } else {
            var url = 'https://passport.sina.cn/sso/islogin?';
            if (url.indexOf('?') == -1) {
              url = url + '?';
            }
            var oDate = new Date();
            var data = {
              random: Math.random(),
              time: oDate.getTime()
            }
            util.jsonp1({
              success: function(rs) {
                rs.data = rs.data || {};
                rs.data.uname = rs.data.nick;
                rs.data.userface = rs.data.portrait_url;
                window.userInfo = rs.data;
                self.render();
              },
              error: function() {
              },
              url: url,
              data: data,
              timeout: 3000
            })
          }
        },
        loadImage: function(url, callback) {
          var img = new window.Image();
          img.onload = function() {
            img.onload = null;
            callback(img);
          }
          img.src = url;
        },
        render: function() {
          var self = this;
          _this.isLogin = true;
          util.wbId = window.userInfo.uid;
          if (window.userInfo.userface) {
            window.$(_this.$refs.avatar).html('<img src=' + window.userInfo.userface + ' alt=' + window.userInfo.uname + ' />');
            window.userInfo.avatar_large = window.userInfo.userface.replace(/222.50/g, '222.180');
            util.avatar_large = window.userInfo.avatar_large;
            self.loadImage(window.userInfo.avatar_large, function() {
              window.$(_this.$refs.avatar).html('<img src=' + window.userInfo.avatar_large + ' alt=' + window.userInfo.uname + ' />');
            });
          }
          if (util.wbId) {
            var ckName = 'SINA_WB_LOCAL_NICKNAME';
            var ckNameId = 'SINA_WB_LOCAL_NICKNAME_UID';
            var ckDomain = 'sina.cn';
            util.setSinaWbCookie(ckName, window.userInfo.uname, ckDomain, 0);
            util.setSinaWbCookie(ckNameId, window.userInfo.uid, ckDomain, 0);
          }
        },
        bindEvent: function() {
          var $mask = window.$('#ct0_mask_full');
          $mask.length > 0 && $mask.bind('touchmove', function(e) {
            e.preventDefault();
            return false;
          });
        },
        init: function() {
          var self = this;
          var isLogin = window.checkLogin();
          if (isLogin && window.curCtLoginInfo.isLogin) {
            self.getUserInfo();
          }

          self.bindEvent();
        },
        controller: function() {
          var self = this;
          self.init();
        }
      }
      window.loginModule.controller();
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/mixin.styl"
  .header
    height: 44px
    background: c_red
    position: relative
    text-align: center
    z-index: 1000
    &.fixed
      position: fixed
      top: 0px
      left: 0px
      right: 0px
      z-index: 1001
    .more
      position: absolute
      left: 8px
      top: 6px
      width: 32px
      height: 32px
      background-size: 32px 32px
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/icon_more')
      cursor: pointer
      &.up
        bg-image('i/icon_arrowup')
    .logo
      display: inline-block
      width: 103px
      height: 26px
      margin-top: 9px
      background-size: cover
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/logo')
      cursor: pointer
    .login
      position: absolute
      right: 8px
      top: 6px
      width: 32px
      height: 32px
      background-size: 32px 32px
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/icon_login')
      cursor: pointer
    .avatar
      position: absolute
      right: 8px
      top: 7px
      width: 30px
      height: 30px
      cursor: pointer
      img
        width: 30px
        height: 30px
        display: block
        border-radius: 100%

  .nav
    position: fixed
    left: 0
    top: 44px
    bottom: 0
    z-index: 999
    width: 100%
    background: #ffffff
    opacity: 0.95
    &.move-transition
      transition: all 0.2s linear
      transform: translate3d(0, 0, 0)
    &.move-enter, &.move-leave
      transform: translate3d(0, -100%, 0)
    .nav-content
      position: relative
      .tabs
        margin-top: 36px
        height: 24px
        line-height: 24px
        height: 24px
        padding: 0 8px 0 4px
        display: flex
        justify-content: space-between
        .tab-item
          flex: 1
          text-align: center
          color: color1
          font-size: fs17
          font-weight: 700
          &.selected
            color: c_red
      .box
        padding: 46px 26px 0;
        border-1px(c_split)
        &::after
          left: 24px
          right: 23px
          bottom: auto
          top: 23px
          width: auto;
        .title
          height: 24px
          line-height: 24px
          position: relative
          color: color1
          font-size: fs17
          font-weight: 700
        .title_inline
          display: inline-block
          margin-right: 38px
          font-weight: normal
          font-size: fs16
          .hot
            position: absolute
            top: 2px
            margin-left: 7px
            width: 22px
            height: 12px
            background-size: 22px 12px
            background-repeat: no-repeat
            vertical-align: top
            bg-image('i/icon_hot')
          .new
            position: absolute
            top: 2px
            margin-left: 7px
            width: 22px
            height: 12px
            background-size: 22px 12px
            background-repeat: no-repeat
            vertical-align: top
            bg-image('i/icon_new')
        .content
          margin-top: 22px
          height: 24px
          line-height: 24px
          .item
            display: inline-block
            color: color1
            font-size: fs16
            padding-right: 20px
      .box1
        padding: 43px 26px 0
        &::after
          top: 22px
      .kf
        margin: 28px 23px 0 24px
        height: 40px
        line-height: 40px
        color: c_icon
        font-size: 15px
        text-align: center
        a
          padding-left: 3px
          font-size: 16px
          color: color1
          letter-spacing: 200
          cursor: pointer
          &:visited
            color: color1
          &:hover
            color: color1
      .nav-close
        height: 120px
        position: relative
        width: 100%
        .icon-close
          border: 1px solid c_split
          width: 82px
          line-height: 30px
          height: 32px
          position: absolute
          left: 50%
          margin-left: -41px
          top: 10px
          font-size: 14px
          color: c_icon
          text-align: center
</style>